<template>
  <div class="h-full pb-60 m-relative">
    <div class="p-20 h-full overflow-y-auto">
      <a-form ref="formRef" :model="form" size="medium" auto-label-width>
        <a-form-item label="提现账号">
          <div class="line-h-32">
            <div class="flex-col" v-if="info?.accountInfo.type == 1">
              <span>法人：{{ info?.accountInfo?.accountName ?? '--' }}</span>
              <span>支付宝：{{ info?.accountInfo?.accountNumber ?? '--' }}</span>
            </div>
            <div class="flex-col" v-else-if="info?.accountInfo.type == 2">
              <span>法人：{{ info?.accountInfo?.accountName ?? '--' }}</span>
              <span>银行卡：{{ info?.accountInfo?.accountNumber ?? '--' }}</span>
            </div>
            <div class="flex-col" v-else-if="info?.accountInfo.type == 3">
              <span>户名：{{ info?.accountInfo.accountName ?? '--' }}</span>
              <span>对公账户：{{ info?.accountInfo?.accountNumber ?? '--' }} </span>
              <span>开户行：{{ info?.accountInfo?.bankName ?? '--' }} </span>
            </div>
            <div v-else>--</div>
          </div>
        </a-form-item>
        <a-form-item label="提现金额">
          <div class="font-bold">￥{{ info?.amount ?? 0 }}</div>
        </a-form-item>
        <template v-if="props.params.opType == 1">
          <a-form-item
            field="payAccount"
            label="打款账号"
            :rules="[{ required: true, message: '请选择打款账号' }]"
            :validate-trigger="['change']"
          >
            <a-radio-group v-model="form.payAccount">
              <a-radio v-for="item in accountList" :key="item.id" :value="item.id">{{ item.name }}</a-radio>
            </a-radio-group>
          </a-form-item>
          <a-form-item
            field="payVoucher"
            label="打款凭证"
            :rules="[{ required: true, message: '请输入打款凭证' }]"
            :validate-trigger="['change', 'input', 'blur', 'focus']"
          >
            <a-input v-model="form.payVoucher" placeholder="请输入打款凭证号"></a-input>
          </a-form-item>
        </template>
        <template v-else>
          <a-form-item
            field="refuseReason"
            label="退回原因"
            :rules="[{ required: true, message: '请输入退回原因' }]"
            :validate-trigger="['change']"
          >
            <a-select v-model="form.refuseReason" placeholder="请输入退回原因" allow-create>
              <a-option value="账号填写错误-打款失败">账号填写错误-打款失败</a-option>
              <a-option value="用户主动要求退回">用户主动要求退回</a-option>
            </a-select>
          </a-form-item>
          <div class="flex flex-a-c" style="color: rgba(255, 0, 84, 1)">
            <icon-exclamation-circle-fill :size="22" />
            <span class="font-bold ml-6" style="font-size: 17px"
              >确认将用户该笔提现操作取消，并且退回到可提现余额？</span
            >
          </div>
        </template>
      </a-form>
      <div class="m-absolute border-box b-0 l-0 r-0 h-60 flex flex-a-c bt-f0 px-20 flex-j-e">
        <a-space v-if="props.params.opType == 1">
          <a-button @click="props.onClose(0)">取消</a-button>
          <a-button type="primary" :loading="loading" @click="onOk">打款</a-button>
        </a-space>
        <a-space v-else>
          <a-button :loading="loading" @click="onOk">确定</a-button>
          <a-button type="primary" @click="props.onClose(0)">取消</a-button>
        </a-space>
      </div>
    </div>
  </div>
</template>

<script setup>
import { accountTransferAudit, accountTransferSelfAccountList } from '@/apis'
import { Message } from '@arco-design/web-vue'

const props = defineProps(['params', 'onClose'])

const info = ref(props.params)
const formRef = ref()
const loading = ref(false)
const accountList = ref([])
const form = reactive({
  id: undefined,
  status: undefined,
  payAccount: undefined,
  payVoucher: undefined,
  refuseReason: undefined
})

const getAccountList = async () => {
  const res = await accountTransferSelfAccountList()
  accountList.value = res.data
}

onMounted(() => {
  form.id = props.params.id
  form.status = props.params.opType == 1 ? 20 : 30
  getAccountList()
})

// 点击确认添加/编辑
const onOk = async () => {
  const validateResult = await formRef.value?.validate()
  if (validateResult) return false
  try {
    loading.value = true
    const validateResult = await formRef.value?.validate()
    if (validateResult) return false
    await accountTransferAudit({ ...form })
    Message.success('操作成功')
    props.onClose()
  } finally {
    loading.value = false
  }
}

provide('formRef', formRef)
</script>
